<script setup lang="ts">
  import caibnet from './cabinet/index.vue';
  import category from './category/index.vue';
  import fileType from './fileTypes/index.vue';
  import cabinetNumber from './cabinetNumber/index.vue';
  import danganSave from './dangansavedate/index.vue';
  import policyAreas from './policyAreas/index.vue';
  import processType from './processType/index.vue';
  import policyDept from './policydept/index.vue';
  import industry from './industry/index.vue';
  import direction from './direction/index.vue';
  const visible = ref(true);
  const visible1 = ref(false);
  const visible2 = ref(false);
  const visible3 = ref(false);
  const visible4 = ref(false);
  const visible5 = ref(false);
  const visible6 = ref(false);
  const visible7 = ref(false);
  const visible8 = ref(false);
  const visible9 = ref(false);
  defineOptions({ name: 'dataCenter' });
  const current = ref('文档类型');
  const dataSource = [
    {
      title: '数据中心',
      data: [
        '文档类型',
        '档案柜类型',
        '档案类别',
        '档案类别号',
        '档案保存期限',
        '惠企政通-政策领域',
        '惠企政通-政府部门',
        '惠企政通-政策行业',
        '惠企政通-政策方向',
      ],
    },
  ];

  function handleClickMenu(item: any) {
    switch (item) {
      case '文档类型':
        visible.value = true;
        visible1.value = false;
        visible2.value = false;
        visible3.value = false;
        visible4.value = false;
        visible5.value = false;
        visible6.value = false;
        visible7.value = false;
        visible8.value = false;
        visible9.value = false;
        break;
      case '档案柜类型':
        visible.value = false;
        visible1.value = true;
        visible2.value = false;
        visible3.value = false;
        visible4.value = false;
        visible5.value = false;
        visible6.value = false;
        visible7.value = false;
        visible8.value = false;
        visible9.value = false;
        break;
      case '档案类别':
        visible.value = false;
        visible1.value = false;
        visible2.value = true;
        visible3.value = false;
        visible4.value = false;
        visible5.value = false;
        visible6.value = false;
        visible7.value = false;
        visible8.value = false;
        visible9.value = false;
        break;
      case '档案类别号':
        visible.value = false;
        visible1.value = false;
        visible2.value = false;
        visible3.value = true;
        visible4.value = false;
        visible5.value = false;
        visible6.value = false;
        visible7.value = false;
        visible8.value = false;
        visible9.value = false;
        break;
      case '档案保存期限':
        visible.value = false;
        visible1.value = false;
        visible2.value = false;
        visible3.value = false;
        visible4.value = true;
        visible5.value = false;
        visible6.value = false;
        visible7.value = false;
        visible8.value = false;
        visible9.value = false;
        break;
      case '流程分类':
        visible.value = false;
        visible1.value = false;
        visible2.value = false;
        visible3.value = false;
        visible4.value = false;
        visible5.value = true;
        visible6.value = false;
        visible7.value = false;
        visible8.value = false;
        visible9.value = false;
        break;
      case '惠企政通-政策领域':
        visible.value = false;
        visible1.value = false;
        visible2.value = false;
        visible3.value = false;
        visible4.value = false;
        visible5.value = false;
        visible6.value = true;
        visible7.value = false;
        visible8.value = false;
        visible9.value = false;
        break;
      case '惠企政通-政府部门':
        visible.value = false;
        visible1.value = false;
        visible2.value = false;
        visible3.value = false;
        visible4.value = false;
        visible5.value = false;
        visible6.value = false;
        visible7.value = true;
        visible8.value = false;
        visible9.value = false;
        break;
      case '惠企政通-政策行业':
        visible.value = false;
        visible1.value = false;
        visible2.value = false;
        visible3.value = false;
        visible4.value = false;
        visible5.value = false;
        visible6.value = false;
        visible7.value = false;
        visible8.value = true;
        visible9.value = false;
        break;
      case '惠企政通-政策方向':
        visible.value = false;
        visible1.value = false;
        visible2.value = false;
        visible3.value = false;
        visible4.value = false;
        visible5.value = false;
        visible6.value = false;
        visible7.value = false;
        visible8.value = false;
        visible9.value = true;
        break;
    }
    current.value = item;
  }
</script>

<template>
  <div class="container">
    <a-row>
      <a-col span="3">
        <a-card title="">
          <a-list :data="dataSource" :bordered="false">
            <template #item="{ item }">
              <a-list
                :data="item.data"
                :bordered="false"
                style="cursor: pointer"
                hoverable
              >
                <template #header>{{ item.title }}</template>
                <template #item="{ item: subItem }">
                  <a-list-item
                    @click="handleClickMenu(subItem)"
                    :class="{ currentItem: subItem === current }"
                  >
                    <div>{{ subItem }}</div>
                  </a-list-item>
                </template>
              </a-list>
            </template>
          </a-list></a-card
        >
      </a-col>
      <a-col span="21">
        <fileType v-if="visible" style="width: 100%" />
        <caibnet v-if="visible1" style="width: 100%" />
        <category v-if="visible2" style="width: 100%" />
        <cabinetNumber v-if="visible3" style="width: 100%" />
        <danganSave v-if="visible4" style="width: 100%" />
        <!--        <processType v-if="visible5" style="width: 100%" />-->
        <policyAreas v-if="visible6" style="width: 100%" />
        <policyDept v-if="visible7" style="width: 100%" />
        <industry v-if="visible8" style="width: 100%" />
        <direction v-if="visible9" style="width: 100%" />
      </a-col>
    </a-row>
  </div>
</template>

<style scoped lang="less">
  .container {
    height: 100%;
    background: #f2f3f5;
  }

  .formContent {
    width: 100%;
  }
  // tree的css样式
  :deep(.icon) {
    width: 1.2em !important;
    height: 1.2em !important;
  }

  :deep(.arco-tree-node-title-text) {
    font-size: 12px;
    width: 140px;
    overflow: hidden; /* 隐藏溢出内容 */
    white-space: nowrap; /* 禁止换行 */
    text-overflow: ellipsis; /* 显示省略号 */
  }

  :deep(.arco-tree-node-indent-block) {
    width: 0px !important;
  }

  :deep(.arco-tree-node-indent) {
  }

  .currentItem {
    background: #f7f8fa !important;
    color: #165dff;
  }
</style>
